@import "../Questions.css";

:local(.picker) {
  width: 290px;
  color: var(--title-color);
  overflow: hidden;
}

:local(.heading) {
  composes: text-bold p2 border-bottom from "style";
  font-size: 14px;
}

:local(.footer) {
  composes: text-bold p2 border-top from "style";
  font-size: 14px;
}

:local(.options) {
  composes: full-height py1 scroll-y from "style";
  max-height: 300px;
}

:local(.option) {
  composes: cursor-pointer relative from "style";
}

:local(.optionContent) {
  composes: px3 py1 flex align-center text-bold from "style";
  font-size: 1em;
  color: var(--title-color);
}

:local(.optionBackground) {
  composes: spread from "style";
  opacity: 0.1;
  background-color: currentColor;
  visibility: hidden;
}

:local(.option.selected) :local(.optionContent),
:local(.option):hover :local(.optionContent) {
  color: inherit;
}

:local(.option.selected) :local(.optionBackground),
:local(.option):hover :local(.optionBackground) {
  visibility: visible;
}

:local(.name) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

:local(.mainIcon) {
  composes: mr1 flex-no-shrink from "style";
}

:local(.removeIcon) {
  composes: flex-align-right flex-no-shrink from "style";
  visibility: hidden;
}
:local(.option):hover :local(.removeIcon) {
  visibility: visible;
}
